<!-- 订单详情 -->
<template>
    <div class="detail" v-loading="listLoading">
      <div class="list">
        <span class="list-text" v-if="find.status == 1">订单状态：待支付</span>
        <span class="list-text" v-if="find.status == 2">订单状态：待配送</span>
        <span class="list-text" v-if="find.status == 3">订单状态：待收货</span>
        <span class="list-text" v-if="find.status == 4">订单状态：已完成</span>
        <span class="list-text" v-if="find.status == 5">订单状态：已取消</span>
        <span class="list-text" v-if="find.status == 5">取消原因：【{{ find.status_reason }}】</span>
      </div>
      <div>
        <span class="titles">收货人信息</span>
        <div class="list">
          <span class="list-text">收货人：{{ find.consignee }}</span>
          <span class="list-text">收货人手机号：{{ find.consignee_phone}}</span>
          <span class="list-text">收货地址：{{ find.address }}</span>
        </div>
      </div>
      <div>
        <span class="titles">订单信息</span>
        <div class="list">
          <span class="list-text">订单编号：{{ find.order_number }}</span>
          <span class="list-text">商品总价：{{ find.goods_sum_money}}元</span>
          <span class="list-text">运    费：{{ find.shiping_fee }}元</span>
          <span class="list-text">订单总价：{{ find.order_sum_money }}元</span>
          <span class="list-text" v-if="find.pay_time">支付时间：{{ find.pay_time }}</span>
          <span class="list-text">下单时间：{{ find.create_time }}</span>
          <span class="list-text">备注：{{ find.remark }}</span>
        </div>
      </div>
      <div>
        <span class="titles">商品信息</span>
        <div class="tables">
          <el-table
          :data="find.goodslist"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            label="商品图片"
            align="center"
            width="180">
            <template slot-scope="scope">
              <img :src="scope.row.shop_imgurl" style="width:75px;height: 75px;" />
            </template>
          </el-table-column>
          <el-table-column
            prop="shop_name"
            align="center"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="shop_price"
            align="center"
            label="商品价格">
          </el-table-column>
          <el-table-column
            prop="number"
            align="center"
            label="购买数量">
          </el-table-column>
        </el-table>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getOrderFind } from "@/api/order";
  export default {
    data() {
      return {
        order_id : '', //订单id
        find : '',
        listLoading : false,
      };
    },
    created() {
      this.order_id = this.$route.query.id;

      this.getOrderFind();
    },
    methods: {
      getOrderFind() {
        //获取订单列表
        this.listLoading = true;
        getOrderFind({order_id:this.order_id})
          .then((res) => {
            this.find = res.data
            this.listLoading = false;
          })
          .catch((err) => {
            this.listLoading = false;
          });
      }
    },
  };
  </script>
  
  <style scoped lang="scss">

  .detail{

    .titles{
      display: block;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      padding: 0px 20px;
    }

    .list{
      padding: 20px;
      padding-left: 80px;

      .list-text{
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 40px;
      }
    }

    .tables{
      margin: 0 auto;
      width: 90%;
    }
  }
  </style>